<route lang="json5" type="home">
  {
    "name": "index",
    "layout": "default",
    "style": {
      "disableScroll": true,
      "navigationStyle": "custom",
      "navigationBarTitleText": "Echo Reminis"
    }
  }
</route>

<script setup lang="ts">
import { useIndexPage } from './index'

defineOptions({
  options: {
    styleIsolation: 'shared',
  },
})

const {
  // 状态
  isLoading,
  isDetial,
  latitude,
  longitude,
  remindBtnText,
  nowTime,
  address,
  plateNumber,
  height,
  anchors,
  // 方法
  onPageLoad,
  onPageShow,
  onPageUnmount,
  handleHeightChange,
  onClickMap,
  handleRemind,
  handleAdmin,
} = useIndexPage()

// 生命周期钩子
onLoad(onPageLoad)
onShow(onPageShow)
onUnmounted(onPageUnmount)
</script>

<template>
  <map
    style="position: absolute; bottom: 0; left: 0; right: 0; top: 0; z-index: 0; height: 100vh; width: 100vw"
    :latitude="latitude" :longitude="longitude" :scale="16" show-location enable-3D enable-zoom enable-scroll
    enable-rotate @tap="onClickMap"
  />

  <wd-floating-panel
    v-model:height="height" :anchors="anchors"
    :safe-area-inset-bottom="true" @height-change="handleHeightChange"
  >
    <view v-if="isDetial" style="padding: 32rpx 48rpx 48rpx">
      <!-- 头部信息 -->
      <view style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 48rpx">
        <view style="flex: 1">
          <text style="font-size: 24rpx; color: #64748b; font-weight: 500; letter-spacing: 0.05em">
            VEHICLE STATUS
          </text>
          <text style="display: block; font-size: 44rpx; font-weight: 600; color: #1e293b; margin-top: 8rpx">
            我的专属座驾
          </text>
        </view>

        <wd-tag
          round custom-style="
            background: #f1f5f9;
            padding: 12rpx 24rpx;
            min-width: 240rpx;
            flex-shrink: 0;
          "
        >
          <view style="display: flex; align-items: center">
            <wd-icon name="time" size="28rpx" color="#64748b" custom-style="margin-right: 8rpx" />
            <text style="font-family: monospace; font-size: 24rpx; color: #475569">
              {{ nowTime }}
            </text>
          </view>
        </wd-tag>
      </view>

      <!-- 信息卡片 -->
      <view
        style="background: linear-gradient(to right, #f0f9ff, #e0e7ff); border-radius: 32rpx; padding: 40rpx; margin-bottom: 48rpx; border: 2rpx solid #e2e8f0"
      >
        <!-- 车牌信息 -->
        <view style="margin-bottom: 48rpx">
          <view style="display: flex; align-items: center; margin-bottom: 24rpx">
            <wd-icon name="discount" size="36rpx" color="#4f46e5" custom-style="margin-right: 16rpx" />
            <text style="font-size: 24rpx; color: #64748b; font-weight: 500; letter-spacing: 0.05em">
              VEHICLE PLATE
            </text>
          </view>
          <wd-tag
            custom-style="display: inline-flex; align-items: center; padding: 24rpx 32rpx; background: white; border-radius: 24rpx; border: 2rpx solid #e2e8f0; margin-left: 56rpx"
          >
            <text style="color: #4f46e5; font-weight: 700; font-size: 36rpx; letter-spacing: 0.1em">
              {{ plateNumber }}
            </text>
          </wd-tag>
        </view>
        <!-- 位置信息 -->
        <view>
          <view style="display: flex; align-items: center; margin-bottom: 24rpx">
            <wd-icon name="location" size="36rpx" color="#4f46e5" custom-style="margin-right: 16rpx" />
            <text style="font-size: 24rpx; color: #64748b; font-weight: 500; letter-spacing: 0.05em">
              CURRENT LOCATION
            </text>
          </view>
          <text style="font-size: 32rpx; color: #1e293b; font-weight: 500; line-height: 1.4; padding-left: 56rpx">
            {{ address }}
          </text>
        </view>
      </view>

      <!-- 按钮组 -->
      <view style="display: flex; align-items: center; gap: 16rpx">
        <wd-button
          round
          size="large"
          type="success"
          icon="notification"
          custom-class="settingBtn mainBtn"
          :loading="isLoading"
          loading-color="white"
          @click="handleRemind"
        >
          {{ remindBtnText }}
        </wd-button>
        <wd-button
          round
          size="large"
          type="icon"
          icon="setting1"
          custom-class="adminBtn iconBtn"
          @click="handleAdmin"
        />
      </view>
    </view>
    <view v-else style="padding: 4rpx 48rpx 48rpx">
      <wd-button round block size="large" type="success" icon="notification" custom-class="settingBtn" :loading="isLoading" loading-color="white" @click="handleRemind">
        {{ remindBtnText }}
      </wd-button>
    </view>
  </wd-floating-panel>
</template>

<style scoped lang="scss">
@import "./index.scss";
</style>
